<template>
	<view>
		<view style="background-color:#670B30;height: 300upx;position: relative;color: #fff;">
			<view style="position: absolute;bottom: 100upx;left: 75upx;">
				<view>
					当前余额
				</view>
				<view style="display: flex;justify-content: space-between;width: 650upx;">
					<text style="font-size: 50upx;margin-top: -20upx 0upx 30upx;">{{credit1}}</text>
					<text style="text-decoration: underline;font-size: 24upx;color: #AEAEB0;">参加任务获得更多余额</text>
				</view>
			</view>
			<view style="border-radius: 10upx; background-color:#fff;height: 170upx;position: absolute;width: 90%;bottom: -95upx;left: 5%;display: flex;justify-content: space-around;">
					<view style="margin-top: 10upx;text-align: center;">
						<image style="width: 100upx;height: 100upx;" src="../../../static/18.png" mode="" @click="navTo('/pageA/member/sign/jindou')"></image>
						<view style="color: #670B30;">余额详情</view>
					</view>
					<view style="margin-top: 10upx;text-align: center;">
						<image style="width: 100upx;height: 100upx;" src="../../../static/05.png" mode=""></image>
						<view style="color: #670B30;">兑换记录</view>
					</view>
					<view style="margin-top: 10upx;text-align: center;" @click="navTo('/pageA/member/sign/sign')">
						<image style="width: 100upx;height: 100upx;" src="../../../static/19.png" mode=""></image>
						<view style="color: #670B30;">每日签到</view>
					</view>
			</view>
		</view>
		<view style="border-radius: 10upx; background-color:#fff;height: 240upx;margin-top: 130upx;width: 90%;margin-left: 5%;">
			<view class="order-section" style="display: flex;justify-content: space-between;height: 100upx;">
			<view  style="font-size: 40upx;font-weight: 550;padding: 20upx;">
				我的订单
			</view>
			<view style="font-size: 24upx;color: #908F8D;font-weight: 550;line-height: 70upx;padding-right: 20upx;" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
				全部 >
			</view>
			</view>
			<view class="order-section" style="color:#000;display: flex;justify-content: space-around;">
				<!-- <view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouye"></text>
					<text>全部订单</text>
				</view> -->
				<view class="order-item" style="text-align: center;" @click="navTo('/pageA/member/points_mall/order/order?state=1')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 70upx;height: 70upx;margin-left: 10upx;" src="../../../static/daifahuo.png" mode=""></image>
					<view>待发货</view>
				</view>
				<view class="order-item"  style="text-align: center;" @click="navTo('/pageA/member/points_mall/order/order?state=2')"  hover-class="common-hover" :hover-stay-time="50">
					<image style="display: block; width: 70upx;height: 70upx;margin-left: 10upx;" src="../../../static/daifukuan.png" mode=""></image>
					<view>待付款</view>
				</view>
				<view class="order-item"  style="text-align: center;" @click="navTo('/pageA/member/points_mall/order/order?state=3')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 70upx;height: 70upx;margin-left: 10upx;" src="../../../static/daishouhuo.png" mode=""></image>
					<view>待收货</view>
				</view>
				<view class="order-item"  style="text-align: center;" @click="navTo('/pageA/member/points_mall/order/order?state=4')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 70upx;height: 70upx;margin-left: 10upx;" src="../../../static/daipingjia.png" mode=""></image>
					<view>待评价</view>
				</view>
				<view class="order-item"  style="text-align: center;" @click="navTo('/pageA/member/points_mall/order/order?state=5')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 70upx;height: 70upx;" src="../../../static/shouhou.png" mode=""></image>
					<view>售后</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 40upx;width: 90%;margin-left: 5%;">
			<view style="font-size: 45upx;margin-bottom: 0upx;">余额商品</view>
			<view style="display: flex;justify-content: space-between;flex-wrap: wrap;flex-direction: row;padding: 20upx 10upx;">
				<view v-for="(item,index) in list" :key="index" style="display: flex;flex-direction: column;width: 320upx;background-color: #F5F5F5;margin-top: 20upx;">
					<view style="border-radius: 20upx;overflow: hidden;">
						<image style="width: 320upx;height: 320upx;" :src="item.thumb" mode=""></image>
					</view>
					<view style="width: 250upx;margin: 20upx auto 0upx;">
						<text>{{item.title}}</text>
						<text>{{item.credit1}}余额+</text>
						<text>{{item.marketprice}}元</text>
					</view>
					<view @click="submit(item.id)" style="background-color:#670B30;color: #fff;width: 200upx;margin: 10upx auto 50upx;border-radius: 20upx;">
						即刻兑换
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id:'',
				res:[],
				list:[],
				credit1:'',
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
				 this.user_id = res.data
				 console.log(this.user_id)
				 this.setAjax()
				},
			 });
		},
		methods: {
			setAjax(){
				// console.log(this.user_id)
				uni.request({
					url: 'http://mall.sytesco.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&credit1=1&app=1',
					method: 'GET',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						openid: this.user_id,
					},
					success: res => {
						console.log(res)
						this.list = res.data.result.list
						this.credit1 = res.data.result.credit1
					},
					fail: () => {},
					complete: () => {}
				});
			},
			navTo(url){
				uni.navigateTo({  
					url
				})  
			},
			submit(e){//提交
					uni.navigateTo({
						url: '/pages/order/create/create?id='+ e
					});
				},
		}
	}
</script>

<style>

</style>

